import React, { Component } from 'react';
import Counter from './Counter';
import Summary from './Summary';

const style = {
	margin: '20px'
}

class ConrtolPanel extends Component {
	constructor(props){
		super(props);
		//不适用flux
		// this.onCounterUpdate = this.onCounterUpdate.bind(this);

		// this.initValues = [ 0, 10, 20 ];
		// const initSum = this.initValues.reduce((a, b) => a+b, 0);
		// this.state = {
		// 	sum: initSum
		// }
	}
	//不适用flux时做的函数
	// onCounterUpdate(newValue, previousValue) {
	// 	console.log("newValue:" + newValue + "   previousValue:" + previousValue);
	// 	const valueChange = newValue - previousValue;
	// 	this.setState({ sum: this.state.sum + valueChange });
	// }

	// render() {
	// 	console.log('enter ConrtolPanel render');
	// 	console.log('this.initValues' + this.initValues);
	// 	return (
	// 		<div style={style}>
	// 			<Counter onUpdate={this.onCounterUpdate} caption="First" />
	// 			<Counter onUpdate={this.onCounterUpdate} caption="Second" initValue={this.initValues[1]} />
	// 			<Counter onUpdate={this.onCounterUpdate} caption="Third" initValue={this.initValues[2]} />
	// 			<div>
	// 				Toal Count: {this.state.sum}
	// 			</div>
	// 			<button onClick={ () => this.forceUpdate()}>
	// 				Click me to re-render
	// 			</button>
	// 		</div>
	// 	)
	// }
	//使用flux
	render() {
		console.log('enter ConrtolPanel render');
		console.log('this.initValues' + this.initValues);
		return (
			<div style={style}>
				<Counter caption="First" />
				<Counter caption="Second" />
				<Counter caption="Third" />
				<hr />
				<Summary />
			</div>
		)
	}
}

export default ConrtolPanel;
//每个react组件都可以通过forceUpdate()强行引发一次重新绘制